<template>
    <div id="NewGoods">
        <div id="NewGoods-content">
            <p>新品首发</p>
            <div>
                <img src="static/lazy.png">
                茶界新品
                <img src="static/center.png" class="img">
                新鲜直达 
                <img src="static/lazy.png">
            </div>	    
        </div>
      
        <div  v-for="i in imgs5">
            <router-link :to="'/GoodsDetails/'+i.title">
                    <div class="GoodsList">
                        <div>
                            <img :src="i.img">
                        </div>
                        <div>
                            <p class="first-p">{{i.title}}</p>
                            <p class="second-p">{{i.content}}</p>
                            <span>￥{{i.price}}</span>
                        </div>
                    </div>
            </router-link>
        </div>
            
        
    </div>
</template>

<script>
    import {mapState} from 'vuex'
export default {
    computed:{
        ...mapState([
            "imgs5"
        ])
    }
}
</script>

<style scoped>
    
    #NewGoods{
        background-color: white;
    }
    p{
        margin: 0;
    }
    #NewGoods-content p{
        text-align: center;
        font-size: 5vw;
    }
    #NewGoods-content div{
        text-align: center;
        color: grey;
        font-size: 3.5vw;
    }
    #NewGoods-content img{
        position: relative;
        top: -0.5vh;
        width: 30vw;
        height: 1vh;
        
    }
    #NewGoods-content .img{
        position: relative;
        width: 4vw;
        top: 0.5vh;
    }
    .GoodsList{
        display: flex;
        height: 27vh;
        border-bottom: 1px solid #f0f0f0;
    }
    .GoodsList img{
        width: 30vw;
        position: relative;
        top: 4vh;
        
    }
    .GoodsList div:nth-of-type(1){
        width: 30%;
       
    }
    .GoodsList div:nth-of-type(2){
        padding-top: 1vh;
        padding-left: 5vw;
        
    }
    .first-p{
        font-size: 4vw;
        margin: 2vh 0 ;
        color: black;
        
    }
    .second-p{
        margin-bottom: 2vh;
        font-size: 3.5vw;
        color: grey;
    }
    span{
        font-size: 4.5vw;
        color: #ff4040;
    }
    a{
        text-decoration: none;
    }
</style>